import React, {useState} from 'react'
import {Modal, Button, Input, Space, Tooltip, Form, Popover} from 'antd';
import {Panel as ColorPickerPanel} from 'rc-color-picker';
import 'rc-color-picker/assets/index.css';

class ModalAddColor extends React.Component {
    layout = {
        labelCol: {span: 8},
        wrapperCol: {span: 16},
        addIsShow: true,
    };
    formRef = null;

    constructor(p) {
        super(p);
        this.state = {
            color: '#62c200',
            keymap: '',

            isShowColor: false,
            colorBtnName: '打开取色板'
        }
        this.formRef = React.createRef();

    }

    //组件被render之后调用
    componentDidMount() {
        // this.setState({
        //     isShow: this.props.isShow
        // })
    }

    //组件被移除DOM之后调用
    componentWillUnmount() {

    }

    onColorChange({color}) {
        this.formRef.current.setFieldsValue({
            color: color
        })
    }

    bindInputValue(inputName, e) {
        let value = e.target.value;
        this.setState({
            [inputName]: value
        });
    }

    switchColorPanle(isClick) {
        if (isClick && this.state.isShowColor) {
            return;
        }
        this.setState({
            isShowColor: !this.state.isShowColor,
            colorBtnName: this.state.isShowColor ? '打开取色板' : '关闭取色板',
        })
    }

    keyChange(changedValues, allValues) {
        let {keymap} = changedValues;
        if (keymap != undefined) {
            let value = keymap;
            const reg = /^[A-Za-z0-9]+$/;
            if (reg.test(value) || !value) {
                value = value.length == 2 ? value.substr(1) : value;
            } else {
                value = value.split('')[0];
            }
            this.formRef.current.setFieldsValue({
                keymap: value
            })
        }

    }

    onFinish() {
    }

    handleCancel(mName) {
        this.setState({
            [mName]: false
        })
    }

    handleOk() {
        this.formRef.current.validateFields();
    }

    show = (isShow) => {
        this.setState({
            addIsShow: isShow
        })
    }


    render() {

        let {color, isShow} = this.state;

        let selectColorContent = (
            <ColorPickerPanel enableAlpha={false} color={this.state.color} onChange={this.onColorChange.bind(this)}
                              mode="RGB"/>
        )

        return (
            <>
                <Modal closeIcon={(<em className={'iconfont icon-guanbi'}></em>)} title="新增颜色" width={350}
                       visible={this.state.addIsShow}
                       onOk={this.handleOk.bind(this)}
                       onCancel={this.handleCancel.bind(this, 'addIsShow')}>
                    <Form onValuesChange={this.keyChange.bind(this)} ref={this.formRef} name="control-hooks"
                          onFinish={this.onFinish}>
                        <Form.Item name="name" rules={[{required: true, message: '请输入名称'}]}>
                            <Input width={300} addonBefore="颜色名称"/>
                        </Form.Item>
                        <Form.Item name="keymap" rules={[{required: true, message: '请输入快捷键'}]}>
                            <Input width={300} addonBefore="颜色按键"
                                   placeholder={'请输入一个数字或字母'}
                                   maxLength={2}
                            />
                        </Form.Item>
                        <Popover visible={this.state.isShowColor} content={selectColorContent}>
                            <Form.Item name="color" width={300} rules={[{required: true, message: '请选择颜色'}]}>
                                <Input.Search
                                    width={300}
                                    value={this.state.color}
                                    enterButton={this.state.colorBtnName}
                                    onClick={this.switchColorPanle.bind(this, true)}
                                    onSearch={this.switchColorPanle.bind(this, false)}
                                    onChange={this.bindInputValue.bind(this, 'color')}
                                    addonBefore="颜　　色"
                                    placeholder=""
                                />
                            </Form.Item>
                        </Popover>
                    </Form>
                </Modal>
            </>
        )
    }
}

export default ModalAddColor
